
:root {
  --unit: calc(1em / 16);
  --width-max-xsmall: calc(320 * var(--unit));
  --width-max-small: calc(600 * var(--unit));
  --width-max-medium: calc(840 * var(--unit));
  --width-max-large: calc(1440 * var(--unit));
  --width-max-xlarge: calc(2220 * var(--unit));

  --breakpoint-xsmall: var(--width-max-xsmall);
  --breakpoint-small: var(--width-max-small);
  --breakpoint-medium: var(--width-max-medium);
  --breakpoint-large: var(--width-max-large);
  --breakpoint-xlarge: var(--width-max-xlarge);

  --margin-xsmall: calc(8 * var(--unit));
  --gutter-xsmall: calc(4 * var(--unit));
  --margin-small: calc(16 * var(--unit));
  --gutter-small: calc(8 * var(--unit));
  --margin-medium: calc(24 * var(--unit));
  --gutter-medium: calc(12 * var(--unit));
  --margin-large: calc(32 * var(--unit));
  --gutter-large: calc(16 * var(--unit));
  --margin-xlarge: calc(32 * var(--unit));
  --gutter-xlarge: calc(20 * var(--unit));
}

/* LESS变量 - 响应式断点，用于媒体查询提高可维护性 */
@breakpoint-xsmall: 320px;
@breakpoint-small: 600px;
@breakpoint-medium: 840px;
@breakpoint-large: 1440px;
@breakpoint-xlarge: 2220px;

/* CSS变量 - 供运行时使用 */
:root {
  --breakpoint-xsmall-px: @breakpoint-xsmall;
  --breakpoint-small-px: @breakpoint-small;
  --breakpoint-medium-px: @breakpoint-medium;
  --breakpoint-large-px: @breakpoint-large;
  --breakpoint-xlarge-px: @breakpoint-xlarge;
}

.responsive-margin {
  margin: var(--margin-medium);
}
.responsive-gutter {
  gap: var(--margin-medium);
}

/* 使用LESS变量提高可维护性 */
@media screen and (max-width: @breakpoint-xlarge) {
  .responsive-margin {
    margin: var(--margin-xlarge);
  }
  .responsive-gutter {
    gap: var(--gutter-xlarge);
  }
}
@media screen and (max-width: @breakpoint-large) {
  .responsive-margin {
    margin: var(--margin-large);
  }
  .responsive-gutter {
    gap: var(--gutter-large);
  }
}
@media screen and (max-width: @breakpoint-medium) {
  .responsive-margin {
    margin: var(--margin-medium);
  }
  .responsive-gutter {
    gap: var(--gutter-medium);
  }
}
@media screen and (max-width: @breakpoint-small) {
  .responsive-margin {
    margin: var(--margin-small);
  }
  .responsive-gutter {
    gap: var(--gutter-small);
  }
}
@media screen and (max-width: @breakpoint-xsmall) {
  .responsive-margin {
    margin: var(--margin-xsmall);
  }
  .responsive-gutter {
    gap: var(--gutter-xsmall);
  }
}

